CSS (Cascading Style Sheets) হল একটি স্টাইল শিট ভাষা যা HTML বা XML ডকুমেন্টের উপস্থাপন (presentation) নিয়ন্ত্রণ করে। CSS ব্যবহার করে আপনি ওয়েব পেজের ডিজাইন, লেআউট, রঙ, ফন্ট এবং অন্যান্য ভিজ্যুয়াল উপাদান নিয়ন্ত্রণ করতে পারেন। এখানে কিছু মৌলিক এবং প্রায়ই ব্যবহৃত CSS উদাহরণ দেওয়া হলো, যা আপনাকে CSS এর কার্যকারিতা বুঝতে সাহায্য করবে।
এই উদাহরণে, আমরা একটি সাধারণ প্যারাগ্রাফে ফন্ট সাইজ, রঙ এবং ফন্ট স্টাইল পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
p {
font-size: 18px;
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<p>এটি একটি উদাহরণ প্যারাগ্রাফ যা CSS দিয়ে স্টাইল করা হয়েছে।</p>
</body>
</html>
ব্যাখ্যা:
এখানে, আমরা একটি div ব্লকের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Example</title>
<style>
div {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h2>এটি একটি div ব্লক যা CSS দিয়ে স্টাইল করা হয়েছে।</h2>
<p>ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এই উদাহরণে, আমরা একটি হেডিং ট্যাগের ফন্ট ফ্যামিলি পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font Family Example</title>
<style>
h1 {
font-family: 'Arial', sans-serif;
color: green;
}
</style>
</head>
<body>
<h1>এই হেডিংয়ের ফন্ট ফ্যামিলি পরিবর্তন করা হয়েছে।</h1>
</body>
</html>
ব্যাখ্যা:
এই উদাহরণে, আমরা একটি div এলিমেন্টকে পেজে সেন্টার করতে দেখাবো।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering Element with CSS</title>
<style>
.center-div {
width: 300px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="center-div">
<p>এই div এলিমেন্টটি সেন্টারে রয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এখানে, একটি বর্ডার এবং প্যাডিং সহ একটি div এলিমেন্ট প্রদর্শন করা হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border and Padding Example</title>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>এই div এর চারপাশে বর্ডার এবং প্যাডিং রয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এখানে, আমরা CSS গ্রিড ব্যবহার করে পেজের কনটেন্ট সাজাবো।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
CSS Hover ইফেক্ট ব্যবহার করে, আপনি একটি এলিমেন্টের উপর মাউস রাখলে এর চেহারা পরিবর্তন করতে পারেন।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hover Example</title>
<style>
button {
padding: 10px 20px;
background-color: lightcoral;
border: none;
color: white;
cursor: pointer;
}
button:hover {
background-color: darkred; /* Hover state */
}
</style>
</head>
<body>
<button>Hover Over Me</button>
</body>
</html>
ব্যাখ্যা:
CSS (Cascading Style Sheets) হল একটি শক্তিশালী ভাষা যা HTML ডকুমেন্টের দৃশ্যমান উপাদান এবং লেআউট নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আমরা বিভিন্ন CSS উদাহরণ দিয়ে দেখেছি কিভাবে আপনি টেক্সট স্টাইলিং, ব্যাকগ্রাউন্ড রঙ, বর্ডার, গ্রিড লেআউট, হোভার ইফেক্ট এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারেন। CSS হল ওয়েব ডিজাইনের মূল অংশ এবং এটি আপনার ওয়েব পেজের ডিজাইন ও পারফরম্যান্স উন্নত করতে সহায়ক।
CSS (Cascading Style Sheets) হল একটি স্টাইল শিট ভাষা যা HTML বা XML ডকুমেন্টের উপস্থাপন (presentation) নিয়ন্ত্রণ করে। CSS ব্যবহার করে আপনি ওয়েব পেজের ডিজাইন, লেআউট, রঙ, ফন্ট এবং অন্যান্য ভিজ্যুয়াল উপাদান নিয়ন্ত্রণ করতে পারেন। এখানে কিছু মৌলিক এবং প্রায়ই ব্যবহৃত CSS উদাহরণ দেওয়া হলো, যা আপনাকে CSS এর কার্যকারিতা বুঝতে সাহায্য করবে।
এই উদাহরণে, আমরা একটি সাধারণ প্যারাগ্রাফে ফন্ট সাইজ, রঙ এবং ফন্ট স্টাইল পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
p {
font-size: 18px;
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<p>এটি একটি উদাহরণ প্যারাগ্রাফ যা CSS দিয়ে স্টাইল করা হয়েছে।</p>
</body>
</html>
ব্যাখ্যা:
এখানে, আমরা একটি div ব্লকের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Example</title>
<style>
div {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h2>এটি একটি div ব্লক যা CSS দিয়ে স্টাইল করা হয়েছে।</h2>
<p>ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এই উদাহরণে, আমরা একটি হেডিং ট্যাগের ফন্ট ফ্যামিলি পরিবর্তন করব।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font Family Example</title>
<style>
h1 {
font-family: 'Arial', sans-serif;
color: green;
}
</style>
</head>
<body>
<h1>এই হেডিংয়ের ফন্ট ফ্যামিলি পরিবর্তন করা হয়েছে।</h1>
</body>
</html>
ব্যাখ্যা:
এই উদাহরণে, আমরা একটি div এলিমেন্টকে পেজে সেন্টার করতে দেখাবো।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centering Element with CSS</title>
<style>
.center-div {
width: 300px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="center-div">
<p>এই div এলিমেন্টটি সেন্টারে রয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এখানে, একটি বর্ডার এবং প্যাডিং সহ একটি div এলিমেন্ট প্রদর্শন করা হয়েছে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border and Padding Example</title>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>এই div এর চারপাশে বর্ডার এবং প্যাডিং রয়েছে।</p>
</div>
</body>
</html>
ব্যাখ্যা:
এখানে, আমরা CSS গ্রিড ব্যবহার করে পেজের কনটেন্ট সাজাবো।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
CSS Hover ইফেক্ট ব্যবহার করে, আপনি একটি এলিমেন্টের উপর মাউস রাখলে এর চেহারা পরিবর্তন করতে পারেন।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hover Example</title>
<style>
button {
padding: 10px 20px;
background-color: lightcoral;
border: none;
color: white;
cursor: pointer;
}
button:hover {
background-color: darkred; /* Hover state */
}
</style>
</head>
<body>
<button>Hover Over Me</button>
</body>
</html>
ব্যাখ্যা:
CSS (Cascading Style Sheets) হল একটি শক্তিশালী ভাষা যা HTML ডকুমেন্টের দৃশ্যমান উপাদান এবং লেআউট নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আমরা বিভিন্ন CSS উদাহরণ দিয়ে দেখেছি কিভাবে আপনি টেক্সট স্টাইলিং, ব্যাকগ্রাউন্ড রঙ, বর্ডার, গ্রিড লেআউট, হোভার ইফেক্ট এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারেন। CSS হল ওয়েব ডিজাইনের মূল অংশ এবং এটি আপনার ওয়েব পেজের ডিজাইন ও পারফরম্যান্স উন্নত করতে সহায়ক।
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
